Responsive web design can assist web page authors to create web pages that can be rendered by web browsers on computer devices with a wide variety of display sizes and resolutions. Markup languages, e.g., hypertext markup language (HTML) or Extensible Markup Language (XML), and style sheet files, e.g., cascading style sheet (CSS) files or extensible style sheet language transformations (XLST) files may contain page content and display instructions, respectively, that allow computing devices to display web pages to readers.
Cascading style sheet files can include instructions that direct web browsers to render web page content using particular predetermined fonts, font sizes, colors, borders and other web page formatting, as well as formatting instructions regarding the display of images on web pages, including the position, orientation, and scaling of images. Cascading style sheet files may also contain media queries that have breakpoints (spatial limits such as display size or browser window size) to indicate that a particular set of formatting instructions should be used to display the web page within those spatial limits. When rendering a web page, a computing device may parse the style sheet file and, responsive to a spatial limit falling within a range of media query breakpoints, select the formatting instructions within the media query to render the web page. Web content management systems provide web page authors with a user interface to assist in the creation of web pages and cascading style sheets that direct web page rendition by web browser software on a computing device. Web content management systems may use templates with predefined display rules and may provide access to stored images in order to assist web page authors perform their work.
Manual editing of cascading style sheets may present difficulties to web page authors when attempting to adjust the presentation of images on digital devices with a wide variety of display sizes and resolutions. The present disclosure relates to methods and systems for authoring web pages, and more specifically, to the use and application of rules within cascading style sheets to a rendered web page that instruct how to appropriately select and render various image representations on multiple displays having sizes and resolutions.